<template>
    <n-card>
        <div class="w-full flex justify-between items-center">
            <div class="flex gap-16px">
                <n-avatar
                    round
                    class="shadow"
                    v-if="userInfo.avatar"
                    :size="72"
                    :src="userInfo.avatar"
                />
                <n-icon v-else :component="PersonCircle" :size="72" />
                <div
                    class="box-border h-full py-10px flex flex-col justify-between"
                >
                    <div class="font-bold font-size-18px">
                        {{ `欢迎使用，${userStore.getUserInfo.username}` }}
                    </div>
                    <div class="opacity-70">
                        <!-- {{ dailyWord }} -->
                        欢迎使用会议室预定系统，祝您使用愉快！
                    </div>
                </div>
            </div>
            <n-statistic label="消息" :value="12" />
        </div>
    </n-card>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { getStore } from "@/store";

import { PersonCircle } from "@vicons/ionicons5";

import type { User } from "@/service/api/types/user";

import { otherRequest } from "@/service/request/request";

const userStore = getStore("user");
const dailyWord = ref("");

const userInfo: User = userStore.getUserInfo;

onMounted(() => {
    // otherRequest("https://v1.xqapi.com/v1.php?y=sm", "get", null)
    //     .then((res) => {
    //         dailyWord.value = res.data;
    //     })
    //     .catch((err: Error) => {
    //         window.NMessage.error(err.message);
    //     });
});
</script>

<style scoped></style>
